<template>
  <div class="admin-container">
    <div class="table-btn">
      <el-button @click="dialogVisible = true">新增类别</el-button>
    </div>
    <div class="table-container">
      <el-table
        :data="typeTableList"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        height="650"
        row-key="id"
        border
        style="width: 100%"
      >
        <el-table-column prop="id" label="序号id" />
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="level" label="级别" />
        <el-table-column fixed="right" label="操作" width="150">
          <template #default="{ row }">
            <el-button
              link
              type="primary"
              size="small"
              @click="addType(row)"
              v-if="row.pid === 0"
            >
              新增
            </el-button>
            <el-button link type="primary" size="small" @click="editType(row)">
              编辑
            </el-button>
            <el-button link type="primary" size="small" @click="delType(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <el-dialog
    v-model="dialogVisible"
    :title="typeForm.id ? '编辑类别' : '新增类别'"
    width="500"
    @close="closeDialog"
  >
    <el-form :model="typeForm" :rules="rules" ref="formRef">
      <el-form-item label="名称" prop="name">
        <el-input v-model="typeForm.name" />
      </el-form-item>
      <el-form-item label="级别" prop="ord">
        <el-input v-model="typeForm.ord" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="createType"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import {
  getTypeAllAPI,
  createTypeAPI,
  delTypeAPI,
  updateTypeAPI,
} from '@/apis/index'
import { ElMessage, ElMessageBox } from 'element-plus'
import { arr2tree } from '@/utils/arr2tree'

// 获取渲染数据
const typeTableList = ref([])
const getTypesAll = async () => {
  const res = await getTypeAllAPI()
  typeTableList.value = arr2tree(res.data.data)
}
getTypesAll()

const dialogVisible = ref(false)

// 新增
const addType = (row) => {
  console.log(row)
  typeForm.value.pid = row.id
  dialogVisible.value = true
}

const formRef = ref(null)
const typeForm = ref({
  name: '',
  ord: '',
  pid: '',
})

const rules = ref({
  name: [{ required: true }],
  ord: [{ required: true }],
})

const createType = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      if (typeForm.value.id) {
        await updateTypeAPI(typeForm.value)
      } else {
        await createTypeAPI(typeForm.value)
      }

      dialogVisible.value = false
      getTypesAll()
      ElMessage({
        message: `${typeForm.value.id ? '更新' : '新增'}成功`,
        type: 'success',
      })

      closeDialog()
    }
  })
}

// 删除
const delType = async (id) => {
  ElMessageBox.confirm('确认删除吗?', 'Warning', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    await delTypeAPI(id)
    getTypesAll()
    ElMessage({
      type: 'success',
      message: '删除成功',
    })
  })
}

// 编辑
const editType = (row) => {
  typeForm.value = JSON.parse(JSON.stringify(row))
  dialogVisible.value = true
}

const closeDialog = () => {
  formRef.value.resetFields()
  typeForm.value = {
    name: '',
    ord: '',
  }
}
</script>

<style lang="css" scoped>
.admin-container {
  margin: 0 auto;
}
.table-title {
  text-align: center;
  font-size: 22px;
  color: rgb(0, 0, 0, 0.7);
}
.table-btn {
  display: flex;
  justify-content: end;
  margin-bottom: 10px;
}
</style>
